<template>
  <div class="login-container">
    <!-- 顶部导航 -->
    <div class="header-nav">
      <div class="brand">智途安行</div>
      <div class="nav-links">
        <span>相关设置</span>
        <span>官方</span>
        <span>帮助</span>
        <span>关于我们</span>
        <el-button type="text" class="download-btn">免费体验</el-button>
      </div>
    </div>

    <!-- 主体表单 -->
    <div class="form-wrapper">
      <el-card class="form-card">
        <h1>Welcome!</h1>
        <p class="subtitle">全心守护，让每一次出行都安心无忧</p >
        
      
        

        <!-- 登录表单 -->
        <el-form :rules="rules" ref="formRef"  :model="form" class="register-form">
          <el-form-item  prop="phone">
            <el-input 

              v-model="form.phone" 
              placeholder="Your full name"
              class="custom-input"
            />
          </el-form-item>
          
          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              type="password"
              placeholder="Your password"
              class="custom-input"
            />
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="remember">记住我</el-checkbox>
          </el-form-item>
          <el-button type="primary" class="signup-btn"  @click="login">登录</el-button>
        </el-form>

        
      </el-card>
    </div>

    <!-- 底部版权 -->
    <div class="footer">
      <div class="copyright">
        © 2025 Made with <span class="heart">❤</span> by 
        <el-link type="primary">Shaun</el-link> & 
        <el-link type="primary">Mr.He</el-link> for a better web
      </div>
      <div class="footer-links">
        <el-link type="info">隐私政策</el-link>
        <el-link type="info">用户协议</el-link>
        <el-link type="info">联系我们</el-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {loginService} from "@/api/user"
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores';

const userStore=useUserStore() 

const router = useRouter();
const formRef = ref(null);
const remember=ref(false)
const form = ref({
  phone: '',
  password: '',
});

const rules = {
  phone: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 5, message: '账号长度不能小于5位', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' },
  ],
};

const login=async()=>{
  //表单校验
  const valid=await formRef.value.validate()
  if(!valid){
    return
  }

  
  
  const res=await loginService(form.value)
  console.log(res)
  if(res.data.code===1){
    ElMessage.success("登录成功")

    userStore.setToken(res.data.data.token)
    //跳转到首页
     router.push('/')
  }
  else{
    ElMessage.error("登录失败")
  }
}
</script>

<style scoped lang="scss">
@font-face {
  font-family: "阿里妈妈刀隶体 Regular";font-weight: 400;src: url("//at.alicdn.com/wf/webfont/iZvYHMLWIGII/95pHXPDSSeg7.woff2") format("woff2"),
  url("//at.alicdn.com/wf/webfont/iZvYHMLWIGII/7YMvRwpyRLeJ.woff") format("woff");
  font-display: swap;
}
.login-container {
  //width: 750px;
  min-height: 0px;
  background: linear-gradient(150deg, #e3f2f1 0%, #c8e6c9 100%);
}

.header-nav {
  display: flex;
  justify-content: space-between;
  padding: 20px 50px;
  background: rgba(255, 255, 255, 0.9);
}

.brand {
  font-weight: 600;
  font-size: 2rem;
  font-family: "阿里妈妈刀隶体 Regular";
}

.nav-links span {
  margin-left: 30px;
  cursor: pointer;
}

.download-btn {
  margin-left: 30px !important;
}

.form-wrapper {
  display: flex;
  justify-content: center;
  padding: 50px 0;
}

.form-card {
  height: 525px;
  width: 550px;
  margin-top: -20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  margin-bottom: 15px;
}

.subtitle {
  margin-top: 40px;
  text-align: center;
  color: #666;
  margin-bottom: 30px;
}

.social-login {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.social-btn {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd !important;
}

.or-divider {
  text-align: center;
  margin: 25px 0;
  color: #999;
  position: relative;
}

.or-divider::before,
.or-divider::after {
  content: "";
  display: inline-block;
  width: 45%;
  height: 1px;
  background: #ddd;
  vertical-align: middle;
  margin: 0 10px;
}

.register-form {
  margin-top: 70px;
}

.custom-input {
  margin-bottom: 10px;
}

.signup-btn {
  width: 100%;
  background-color: #2d7961;
  border: none;
  padding: 12px;
  margin-top: 10px;
}


.footer {
  height: 50px;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
}

.heart {
  color: #e74c3c;
}

.footer-links {
  margin-top: 10px;
}

.footer-links .el-link {
  margin: 0 15px;
}
</style>